<template>
  <div class="HomeContainer">
    <!-- 轮播图区域 -->
    <mt-swipe :auto="4000">
      <mt-swipe-item>
        <img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy8xaFJlSGFxYWZhZmpROVBnTGpxVVBxRlZBRGJMQjBVNXpscFUwUVpReWp6c2F1M0hpYTFMY2sxVVRkSHJpYXU2aWJmeDJSVHByMGljejlBS1BXS0hrZ3ZiancvNjQw?x-oss-process=image/format,png"/>
        </mt-swipe-item>
      <mt-swipe-item>
        <img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9QbjRTbTBSc0F1aWFtT2JhbldsOXhFSk53ZnVyZzA1WEF1QnpMR2lhdzRJM1AzWXFnRGZXbTNPUHQ2TWJjWkNqRkEyNXF1U05mUU1nb25kYlp5a0t2bndBLzY0MA?x-oss-process=image/format,png"/>
      </mt-swipe-item>
      <mt-swipe-item>
        <img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9QbjRTbTBSc0F1Z3VIODk3ZDhSN2phbngyR3RJYkx2dDhvSTNwMHlxUnN0eXZIWkphMHdqSGZIOWlhZkRURmcxQjNabnZzWUx4M2xJeEwxUGdkZmljUkpBLzY0MA?x-oss-process=image/format,png"/>
      </mt-swipe-item>
    </mt-swipe>
    <!-- 宫格样式 -->
     <ul class="mui-table-view mui-grid-view mui-grid-9">
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="home/newslist">
              <span class="mui-icon mui-icon-home"></span>
              <div class="mui-media-body">新闻资讯</div></router-link></li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="home/photosList">
              <span class="mui-icon mui-icon-email"></span>
              <div class="mui-media-body">图片分享</div></router-link></li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to='home/goodsList'>
              <span class="mui-icon mui-icon-chatbubble"></span>
              <div class="mui-media-body">商品购买</div></router-link></li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a>
              <span class="mui-icon mui-icon-location"></span>
              <div class="mui-media-body">留言反馈</div></a></li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a>
              <span class="mui-icon mui-icon-search"></span>
              <div class="mui-media-body">视频专区</div></a></li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a>
              <span class="mui-icon mui-icon-phone"></span>
              <div class="mui-media-body">关于我们</div></a></li>
  </ul>
  </div>
</template>

<script>
import axios from 'axios'
import { Toast } from 'mint-ui'

export default{
  data () {
    return {
      lubotuList: [] // 轮播图数组
    }
  },
  created () {
    // this.getLunBoTu()
  },
  methods: {
    getLunBoTu () {
      axios.get('http://localhost:8080/api/getLunBo').then(result => {
        if (result.status === 200) {
          this.lubotuList = result.data
        } else {
          Toast('加载轮播图失败')
        }
        console.log(result)
      })
    }
  }
}
</script>

<style scoped>
  .HomeContainer img{
    width: 100%;
  }
  .mint-swipe{
    height:200px;
  }
  /* .mint-swipe-item:nth-child(1){
    background-color: red;
  }
  .mint-swipe-item:nth-child(2){
    background-color: yellow;
  }
  .mint-swipe-item:nth-child(3){
    background-color: blue;
  } */
  .mui-grid-9{
    background-color: #fff;
    }
  .mui-grid-view.mui-grid-9 .mui-table-view-cell{
    background-color: #fff;
    border:0;
  }
  .mui-media-body{
    font-size: 13px;
  }
</style>
